<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{width: 100px;height: 100px;background: red;transition: all 3s 1s ease-in-out;}
        .one:hover{width: 200px;height: 200px;background: blue;}
        ul,li{margin: 0;padding: 0;list-style: none;}
        ul{width: 480px;height: 70px;}
        ul li{width: 80px;height: 70px;float: left;background: url('./img/1.png'); transition: .5s;}
        ul li:nth-child(1){background-position: -10px  -110px;}
        ul li:nth-child(2){background-position: -90px  -110px;}
        ul li:nth-child(3){background-position: -170px -110px;}
        ul li:nth-child(4){background-position: -250px -110px;}
        ul li:nth-child(5){background-position: -330px -110px;}
        ul li:nth-child(6){background-position: -410px -110px;}
        
        ul li:hover:nth-child(1){background-position: -10px  -15px;}
        ul li:hover:nth-child(2){background-position: -90px  -15px;}
        ul li:hover:nth-child(3){background-position: -170px -15px;}
        ul li:hover:nth-child(4){background-position: -250px -15px;}
        ul li:hover:nth-child(5){background-position: -330px -15px;}
        ul li:hover:nth-child(6){background-position: -410px -15px;}

        .box1{width: 300px;height: 300px;border: 1px solid black;}
        .box2{width: 100px;height: 100px;background: red;transition: 2s;}
        .box1:hover .box2{
            /*transform: translate(100px,100px);*/
            /* transform: scale(2,2); */
            /* transform: rotate(45deg); */
            transform: skew(30deg,30deg);
        }
    </style>
</head>
<body>
    <!--
        浏览器            内核            前缀
        IE              Trident         -ms-
        Firefox         Gecko           -moz-
        Opera           Presto          -o-
        Chrome          Webkit          -webkit-
        Safari          Webkit          -webkit-
        Opera、Chrome   Blink

        浏览器前缀
        提前适应css 不是标准的 是浏览器自己的
        css3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀
        浏览器内核
        浏览器用什么去解析代码 浏览器的核心引擎
    -->
    <!--
        过渡
        transition-property  规定设置过渡效果的css属性的名称
        transition-duration  规定完成过渡效果需要多少秒或毫秒
        transition-delay     定义过渡效果何时开始 可以是负值
        transition-timing-function 规定速度效果的速度曲线 ease逐渐慢下来 ease-in加速 ease-out减速 ease-in-out先加速后减速 cubic-bezier自定义
    -->
    <!--
        变形
        translate 位移 translateX translateY translateZ(3d)
        scale     缩放 正常是1  scaleX scaleY scaleZ(3d)
        rotate    旋转 旋转的值，单位是角度deg
        skew      斜切 单位也是角度
    -->
    <!--
        变形、旋转操作不会影响其他元素
        变形操作只能添加给块元素，不能添加给内联元素
        复合写法，可以同时添加多个变形操作 执行是有顺序的，先执行后面的操作，再执行前面的操作
                translate会受到rotate、scale、skew的影响
        transform-origin 设置基点 默认基点是中点 
    -->
    <div class="one"></div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul><br>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>